﻿<div class="panel panel-default">
    <div class="panel-heading" style="position: relative;">
        <div class="row">
            <h3 class="panel-title col-xs-6">
                @L("TaskList") - <span data-bind="text: abp.utils.formatString(localize('Xtasks'), tasks().length)"></span>
            </h3>
            <div class="col-xs-6 text-right">
                <select data-bind="value: selectedTaskState, event: { change: refreshTasks }">
                    <option value="0">@L("AllTasks")</option>
                    <option value="1">@L("ActiveTasks")</option>
                    <option value="2">@L("CompletedTasks")</option>
                </select>
            </div>
        </div>
    </div>
    <ul class="list-group" data-bind="foreach: tasks">
        <div class="list-group-item">
            <span class="task-state-icon glyphicon" data-bind="click: $parent.changeTaskState, css: { 'glyphicon-minus': state() == 1, 'glyphicon-ok': state() == 2 }"></span>
            <span data-bind="html: description(), css: { 'task-description-active': state() == 1, 'task-description-completed': state() == 2 }"></span>
            <br />
            <span data-bind="visible: assignedPersonId()">
                <span class="task-assignedto" data-bind="text: assignedPersonName"></span>
            </span>
            <span class="task-creationtime" data-bind="text: moment(creationTime()).fromNow()"></span>
        </div>
    </ul>
</div>